import styled from "styled-components"

export const BrowserWrapper = styled.div`
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #333;
  opacity: 0.96;
  z-index: 99999;
  .all {
    display: flex;
    flex-direction: column;
    height: 100%;
    .top {
      position: relative;
      height: 80px;
      > span {
        position: absolute;
        right: 10px;
        margin: 0 auto;
        font-size: 60px;
        color: #fff;
        cursor: pointer;
      }
    }
    .content {
      position: relative;
      display: flex;
      flex: 1;
      .control {
        position: absolute;
        z-index: 99;
        top: 0;
        right: 30px;
        bottom: 0;
        left: 30px;
        display: flex;
        justify-content: space-between;
        .btn {
          display: flex;
          align-items: center;
          width: 80px;
          color: #fff;
          cursor: pointer;
        }
      }
      .picture {
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        margin: 10px auto;
        width: 100%;
        height: 100%;
        img {
          width: fit-content;
          object-fit: contain;
          user-select: none;
        }
        /* 动画样式 */
        .pic-enter {
          /* 判断是点击了左还是右移 */
          transform: translateX(
            ${(props) => (props.isRight ? "100%" : "-100%")}
          );
          opacity: 0;
        }
        .pic-enter-active {
          transform: translateX(0);
          opacity: 1;
          transition: all 200ms ease;
        }
        .pic-exit {
          opacity: 1;
        }
        .pic-exit-active {
          opacity: 0;
          transition: all 200ms ease;
        }
      }
    }
    .indicator {
      height: 140px;
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      margin-bottom: 60px;
      .ind {
        position: relative;
        margin: 4px auto;
        width: 50%;
        height: 100%;
        .info {
          position: absolute;
          left: 0;
          right: 0;
          bottom: ${(props) => props.showList1}%;
          transition: bottom 300ms ease;
          padding: 0 5px;
          display: flex;
          justify-content: space-between;
          .count,
          .show {
            user-select: none;
            font-size: 14px;
            color: #fff;
          }
          .show {
            cursor: pointer;
          }
          .indicator-pics {
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-around;
          }
        }
      }
    }
  }
  .pics {
    padding: 5px;
    width: 170px;
    height: ${(props) => props.showList2}px;
    transition: height 300ms ease-out;
    opacity: 0.5;
    &.active {
      opacity: 1;
    }
    img {
      border: 1px solid #333;
      border-radius: 3px;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
`
